<h2>Message</h2>

<h3>Basic</h3>
<section>
  <button fuiBtn="primary" [fuiCascadeTrigger]="basicCascade">
    Cascade
  </button>
  <fui-cascade #basicCascade>
    <fui-cascade-item>Dog</fui-cascade-item>
    <fui-cascade-item>Fish</fui-cascade-item>
    <fui-cascade-item>Cat</fui-cascade-item>
  </fui-cascade>
</section>

<h3>Nested Cascade</h3>
<section>
  <button fuiBtn="primary" [fuiCascadeTrigger]="nestedCascade">
    Nested Cascade
  </button>
  {{chosen}}
  <fui-cascade #nestedCascade [direction]="direction">
    <fui-cascade-item [fuiCascadeTrigger]="skyCascade">Sky</fui-cascade-item>
    <fui-cascade-item (click)="choose('Ground')">Ground</fui-cascade-item>
    <fui-cascade-item [fuiCascadeTrigger]="seaCascade">Sea</fui-cascade-item>
  </fui-cascade>

  <fui-cascade #skyCascade>
    <fui-cascade-item [fuiCascadeTrigger]="birdCascade">Bird</fui-cascade-item>
    <fui-cascade-item (click)="choose('Plane')">Plane</fui-cascade-item>
    <fui-cascade-item (click)="choose('Cloud')">Cloud</fui-cascade-item>
  </fui-cascade>

  <fui-cascade #birdCascade>
    <fui-cascade-item (click)="choose('Parrot')">Parrot</fui-cascade-item>
    <fui-cascade-item (click)="choose('Owl')">Owl</fui-cascade-item>
    <fui-cascade-item (click)="choose('Sparrow')">Sparrow</fui-cascade-item>
  </fui-cascade>

  <fui-cascade #seaCascade>
    <fui-cascade-item (click)="choose('Fish')">Fish</fui-cascade-item>
    <fui-cascade-item (click)="choose('Boat')">Boat</fui-cascade-item>
  </fui-cascade>
</section>
